import React from 'react'
import {Image, StyleSheet, Text, TouchableOpacity} from "react-native";
import PropTypes from 'prop-types'

const NavigationItem = (props) =>{
  const icon = props.icon && <Image style={[styles.icon, props.iconStyle]} source={props.icon} />
  const title = props.title && <Text style={[styles.title, props.titleStyle]}>{props.title}</Text>
  return (
    <TouchableOpacity style={styles.container} onPress={props.onPress}>
      {icon}
      {title}
    </TouchableOpacity>
  )
}


const styles = StyleSheet.create({
  container:{
    flex:1,
    flexDirection:'row',
    justifyContent:'center',
    alignItems:'center',
  },
  icon:{
    width: 27,
    height: 27,
    margin: 8,
  },
  title:{
    fontSize: 15,
    color: '#333333',
    margin: 8,
  }
})

NavigationItem.propTypes = {
  iconStyle:PropTypes.object,
  titleStyle:PropTypes.object,
  icon:PropTypes.any,
  title:PropTypes.string,
  onPress:PropTypes.func,
}

export default NavigationItem
